<template>
  <div class="w-full h-32 pl-10 pr-10">
    <!-- 基础滚动 -->
    <CollapseContainer class="mt-5 w-200" title="基础滚动">
      <!-- 要有一个 div 做为父容器，并指定高度。直接使用 CollapseContainer 做父容器不行-->
      <div class="h-50">
        <!-- ScrollContainer 要设置有 padding 属性，否则滚动条会和内容重叠-->
        <ScrollContainer class="p-3">
          <ul>
            <li :style="{ border: '1px solid #eee' }" v-for="index in 100" :key="index"> {{ index }} </li>
          </ul>
        </ScrollContainer>
      </div>
    </CollapseContainer>

    <!-- 函数操作滚动位置 -->
    <CollapseContainer class="mt-5 w-200" title="函数操作滚动位置">
      <!-- 要有一个 div 做为父容器，并指定高度。直接使用 CollapseContainer 做父容器不行-->
      <div class="h-50">
        <!-- ScrollContainer 要设置有 padding 属性，否则滚动条会和内容重叠-->
        <ScrollContainer class="p-3" ref="scrollRef">
          <ul>
            <li :style="{ border: '1px solid #eee' }" v-for="index in 100" :key="index"> {{ index }} </li>
          </ul>
        </ScrollContainer>
      </div>

      <!-- CollapseContainer 自定义按钮区 -->
      <template #action>
        <a-button @click="scrollTo(100)" class="mr-2"> 滚动到100px </a-button>
        <a-button @click="scrollTo(800)" class="mr-2"> 滚动到800px </a-button>
        <a-button @click="scrollTo(0)" class="mr-2"> 滚动到顶部 </a-button>
        <a-button @click="scrollBottom()" class="mr-2"> 滚动到底部 </a-button>
      </template>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="笔记">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { MarkdownViewer } from '@/components/Markdown';
  import { ref } from 'vue';
  import { ScrollContainer, CollapseContainer } from '@/components/Container';
  import type { ScrollActionType } from '@/components/Container';

  // 通过 ref 关联 ScrollContainer 组件
  const scrollRef = ref<ScrollActionType>(null);

  // 滚动到固定为止
  function scrollTo(top: number) {
    // 设置滚动时间为 1.5s
    scrollRef.value?.scrollTo(top, 1500);
  }

  // 滚动到底部
  function scrollBottom() {
    // 默认500毫秒，置顶为5s滚动到底部
    scrollRef.value?.scrollBottom(5000);
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

## ScrollContainer
* ScrollContainer 是 v-ben 参考 element-ui 的 el-scroolbar 组件实现的
* 官网: <a href="https://doc.vvbin.cn/components/scroll-container.html" target="_blank">vben ScrollContainer 官方文档</a>


### 常用方法

| 方法名 |  回调参数 | 说明 |
| :--- | :--- | :--- |
| scrollBottom | (duration:number=500)  | 滚动到底部 |
| scrollTo | (to:number, duration:number=500)  | 滚动到指定位置, 单位px。默认耗时500 毫秒 |

`;
  }

  function getSource() {
    return `

### 基础滚动

\`\`\`html
\<template\>
  <!-- 基础滚动 -->
  <CollapseContainer class="mt-5 w-200" title="基础滚动">
    <!-- 要有一个 div 做为父容器，并指定高度。直接使用 CollapseContainer 做父容器不行-->
    <div class="h-50">
      <!-- ScrollContainer 要设置有 padding 属性，否则滚动条会和内容重叠-->
      <ScrollContainer class="p-3">
        <ul>
          <li :style="{ border: '1px solid #eee' }" v-for="index in 100" :key="index"> {{ index }} </li>
        </ul>
      </ScrollContainer>
    </div>
  </CollapseContainer>

\</template\>

\<script lang="ts" setup\>
  import { ref } from 'vue';
  import { ScrollContainer, CollapseContainer } from '@/components/Container';

\</script\>
\`\`\`



### 函数操作滚动位置

\`\`\`html
\<template\>
  <!-- 函数操作滚动位置 -->
  <CollapseContainer class="mt-5 w-200" title="函数操作滚动位置">
    <!-- 要有一个 div 做为父容器，并指定高度。直接使用 CollapseContainer 做父容器不行-->
    <div class="h-50">
      <!-- ScrollContainer 要设置有 padding 属性，否则滚动条会和内容重叠-->
      <ScrollContainer class="p-3" ref="scrollRef">
        <ul>
          <li :style="{ border: '1px solid #eee' }" v-for="index in 100" :key="index"> {{ index }} </li>
        </ul>
      </ScrollContainer>
    </div>

    <!-- CollapseContainer 自定义按钮区 -->
    <template #action>
      <a-button @click="scrollTo(100)" class="mr-2"> 滚动到100px </a-button>
      <a-button @click="scrollTo(800)" class="mr-2"> 滚动到800px </a-button>
      <a-button @click="scrollTo(0)" class="mr-2"> 滚动到顶部 </a-button>
      <a-button @click="scrollBottom()" class="mr-2"> 滚动到底部 </a-button>
    </template>
  </CollapseContainer>
\</template\>

\<script lang="ts" setup\>
  import { ref } from 'vue';
  import { ScrollContainer, CollapseContainer } from '@/components/Container';
  import type { ScrollActionType } from '@/components/Container';

  // 通过 ref 关联 ScrollContainer 组件
  const scrollRef = ref<ScrollActionType>(null);

  // 滚动到固定为止
  function scrollTo(top: number) {
    // 设置滚动时间为 1.5s
    scrollRef.value?.scrollTo(top, 1500);
  }

  // 滚动到底部
  function scrollBottom() {
    // 默认500毫秒，置顶为5s滚动到底部
    scrollRef.value?.scrollBottom(5000);
  }
\</script\>
\`\`\`
  `;
  }
</script>
